<template>
  <div class="SureRecharge">
    <Header title="确认充值"></Header>
    <div style="padding:43px 6px 0 6px">
      <div class="moneyList">
        <div>
          <div>付款店铺:</div>
          <div>{{payinfo.name}}</div>
        </div>
        <div>
          <div>{{type==0?'充值金额':'购买套餐'}}:</div>
          <div>{{payinfo.paymoney}} 元</div>
        </div>
        <div>
          <div>购买用户姓名:</div>
          <div>{{userinfo.name}}</div>
        </div>
        <div>
          <div>购买用户手机:</div>
          <div>{{userinfo.tel}}</div>
        </div>
        <div @click="type==0?'':useCoupon()">
          <div>{{type==0?'赠送金额:':'优惠劵'}}</div>
          <div>
            <span class="_ssssa">{{type==0?giftAmount+'元':Object.keys(sgiftcoupon).length>0?sgiftcoupon.name:giftcoupon}}</span>
            <x-icon type="ios-arrow-forward" size="12" v-if="type!=0"></x-icon>
          </div>
        </div>
      </div>
      <div v-if="Object.keys(sgiftcoupon).length>0">
        <div class="allmoney" v-if="sgiftcoupon.type==3">
          <span style="color:#000;">总计:</span>￥{{payinfo.paymoney}}元
        </div>
        <div class="allmoney" v-if="sgiftcoupon.type==1||sgiftcoupon.type==2">
          <span style="color:#000;">总计:</span>￥{{selectcou.amount}}元
        </div>
      </div>
      <div v-else>
        <div class="allmoney">
          <span style="color:#000;">总计:</span>￥{{payinfo.paymoney}}元
        </div>
      </div>
      <div style="color: #f25f5f;font-size: 12px;text-align: right" v-if="sgiftcoupon.type==3">
        现使用天数=套餐天数（{{payinfo.expiresDay}}天）+ 天数券天数（{{sgiftcoupon.discount}}天）
      </div>
      <x-button type="primary" class="saveinfo" @click.native="paymoney">支付</x-button>
    </div>
  </div>
</template>

<script>
  import {XButton} from 'vux'
  import Header from './../Header'
  import {BestMatch, SetMeal, Discounted, UserInfo} from '../../api/mine'
  import {mapState} from 'vuex'

  export default {
    name: 'SureRecharge',
    data () {
      return {
        type: 0,
        payinfo: {},
        userinfo: {},
        giftAmount: 0,//赠送金额
        giftcoupon: '', //可用优惠券
        couponList: [],//可用优惠券列表
        selectcou: {}
      }
    },
    created () {
      this.payinfo = this.$route.query
      this.type = this.$route.query.typeid
      UserInfo().then(res => {
        this.userinfo = res.data.data
      })
      if (this.$route.query.typeid == 0) {
        BestMatch({
          'amount': this.$route.query.paymoney
        }).then(res => {
          debugger
          if (res.data.data !== null) {
            this.giftAmount = res.data.data.giftAmount
          }
        })
      } else {
        SetMeal({
          'set-meal-id': this.$route.query.typeid,
          'seat-type': this.$route.query.settype
        }).then(res => {
          if (res.data.data.length === 0) {
            this.giftcoupon = '暂无可用优惠券'
          } else {
            this.giftcoupon = '有可用优惠券'
            this.couponList = res.data.data
          }
        })
        if (Object.keys(this.sgiftcoupon).length > 0) {
          Discounted({
            'setMealId': this.$route.query.typeid,
            'seatType': this.$route.query.settype,
            'couponId': this.sgiftcoupon.couponId,
          }).then(res => {
            if (res.data.status == 'success') {
              this.selectcou = res.data.data
            }
          })
        }
      }

      console.log(this.sgiftcoupon)
    },
    methods: {
      paymoney () {
        let amount
        if (Object.keys(this.sgiftcoupon).length > 0) {
          if (this.sgiftcoupon.type == 3) {
            amount = this.payinfo.paymoney
          } else {
            amount = this.selectcou.amount
          }

        } else {
          amount = this.payinfo.paymoney
        }

        this.$router.replace({
          name: 'PayMode',
          query: {
            couponId: Object.keys(this.sgiftcoupon).length > 0 ? this.sgiftcoupon.couponId : '',
            typeid: this.payinfo.typeid,
            settype: this.payinfo.settype,
            expiresDay: this.payinfo.expiresDay,
            shopid: this.payinfo.shopid,
            name: this.payinfo.name,
            amount: amount
          }
        })
        this.$store.dispatch('SELECT_COUPON', {
          selectCoupon: {}
        })
      },
      useCoupon () {
        this.$router.push({
          name: 'Coupon',
          query: {
            couponList: JSON.stringify(this.couponList)
          }
        })
      }
    },
    computed: {
      ...mapState({
        sgiftcoupon: state => state.selectCoupon,
      })
    },
    components: {
      Header,
      XButton
    }
  }
</script>

<style lang="less" type="text/less">
  .SureRecharge {
    color: @font-color;
    .weui-btn:after {
      border: none;
    }
    .moneyList {
      background: #fff;
      padding: 0 12px;
      border-radius: 3px;
      ._ssssa {
        color: @common-color;
      }
      & > div {
        padding: 12px 0;
        border-bottom: 1px #F8FAF9 solid;
        display: flex;
        font-size: 14px;
        & > div {
          &:first-child {
            flex: 2;
            text-align: left;
            font-size: 15px;
            color: #000;
          }
          &:last-child {
            flex: 3;
            text-align: right;
          }
        }
      }
    }
    .allmoney {
      font-size: 18px;
      padding: 12px;
      text-align: right;
      color: @common-color;
    }
    .saveinfo {
      width: calc(100% - 15px);
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      margin-top: 24px;
      color: #fff;
      border-radius: 42px;
      background-color: @common-color;
    }
  }
</style>
